<template>
  <body>
    <div class="login-container" style=" margin-left: 1000px;">
      <el-card class="login-card">
        <el-form
          :model="form"
          label-width="auto"
        >
          <el-form-item label="用户名:">
            <el-input v-model="form.UserName" />
          </el-form-item>
          <el-form-item label="密码:">
            <el-input v-model="form.Password" show-password />
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item prop="identifyCode" label="验证码:">
            <el-input
              placeholder="请输入验证码"
              v-model.trim="form.identifyCode"
              style="width: 200px;"
            >
            </el-input>
            <IdentifyCode
              ref="identify"
              class="code-box"
              :contentWidth="120"
              :contentHeight="60"
              @updateIdentifyCode="setIdentifyCode"
            ></IdentifyCode>
          </el-form-item>
          <el-form-item style="margin-left: 58px">
            <el-button type="primary" @click="onSubmit">登录</el-button>
            <!-- <el-button>Cancel</el-button> -->
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </body>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import { useRouter } from "vue-router";
// import { useCounterStore } from "@/stores/counter";
const apiUrl = import.meta.env.VITE_APP_API_URL;
import IdentifyCode from "@/components/IdentifyCode.vue";
import {readaxios,writeaxios} from "@https/axioshttps.ts"
let curIdentifyCode = ref("");

// const store = useCounterStore();

const router = useRouter();

const form = reactive({
  UserName: "",
  Password: "",
  identifyCode: "",
});

const onSubmit = () => {
  if (form.UserName == "" || form.Password == "") {
    ElMessage.error("请输入用户名和密码");
    return;
  }
  if (form.identifyCode.toUpperCase() != curIdentifyCode.value) {
    ElMessage.error("验证码错误");
    return;
  }

  axios.get(apiUrl+"/T5/ProductInfo/LoginHandle", {
    params: {
      UserName: form.UserName,
      Password: form.Password
    }
  }).then((res) => {
    if (res.data.code === 202) {
      ElMessage.success("登录成功");
      router.push('/MathEMS');
    } else {
      ElMessage.error("用户名或密码错误");
    }
  });
};

const setIdentifyCode = (val: any) => {
  curIdentifyCode.value = val;
};
</script>

<style scoped>
body {
  display: grid;
  place-items: center;
}
.code-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  margin-left:10px ;
}
/* 使用 ::v-deep 穿透来修改 IdentifyCode 组件的样式 */
::v-deep .identify-code-container {
  border: 1px solid #ccc; /* 示例：添加边框 */
  padding: 5px; /* 示例：添加内边距 */
  border-radius: 5px; /* 示例：添加圆角 */
  background-color: #f9f9f9; /* 示例：设置背景颜色 */
}
</style>